import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Switch,
  TextInput,
  Modal,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/MaterialIcons';

const SecuritySettingsScreen = ({ navigation }) => {
  const [biometricEnabled, setBiometricEnabled] = useState(true);
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const securityFeatures = [
    {
      title: '生物识别',
      description: '使用指纹或面容ID登录',
      enabled: biometricEnabled,
      onToggle: setBiometricEnabled,
    },
    {
      title: '双重验证',
      description: '为账户添加额外的安全层',
      enabled: twoFactorEnabled,
      onToggle: setTwoFactorEnabled,
    },
    {
      title: '交易通知',
      description: '接收所有交易的通知',
      enabled: notificationsEnabled,
      onToggle: setNotificationsEnabled,
    },
  ];

  const securityActions = [
    { title: '修改密码', icon: 'lock', action: () => setShowPasswordModal(true) },
    { title: '修改PIN码', icon: 'pin', action: () => {} },
    { title: '登录历史', icon: 'history', action: () => {} },
    { title: '设备管理', icon: 'devices', action: () => {} },
    { title: '恢复短语', icon: 'key', action: () => {} },
  ];

  const handleChangePassword = () => {
    if (!currentPassword || !newPassword || !confirmPassword) {
      alert('请填写所有字段');
      return;
    }
    if (newPassword !== confirmPassword) {
      alert('新密码不匹配');
      return;
    }
    if (newPassword.length < 8) {
      alert('密码至少需要8个字符');
      return;
    }
    
    // 模拟密码修改成功
    setShowPasswordModal(false);
    setCurrentPassword('');
    setNewPassword('');
    setConfirmPassword('');
    alert('密码修改成功');
  };

  const renderSecurityItem = (item, index) => (
    <View key={index} style={styles.securityItem}>
      <View style={styles.securityInfo}>
        <Text style={styles.securityTitle}>{item.title}</Text>
        <Text style={styles.securityDescription}>{item.description}</Text>
      </View>
      <Switch
        value={item.enabled}
        onValueChange={item.onToggle}
        trackColor={{ false: '#767577', true: '#4CAF50' }}
        thumbColor={item.enabled ? '#fff' : '#f4f3f4'}
      />
    </View>
  );

  const renderActionItem = (item, index) => (
    <TouchableOpacity
      key={index}
      style={styles.actionItem}
      onPress={item.action}
    >
      <View style={styles.actionLeft}>
        <View style={styles.actionIcon}>
          <Icon name={item.icon} size={20} color="#fff" />
        </View>
        <Text style={styles.actionTitle}>{item.title}</Text>
      </View>
      <Icon name="chevron-right" size={20} color="#a0a0a0" />
    </TouchableOpacity>
  );

  return (
    <LinearGradient colors={['#1a1a2e', '#16213e']} style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Header */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Icon name="arrow-back" size={24} color="#fff" />
          </TouchableOpacity>
          <Text style={styles.title}>安全设置</Text>
          <TouchableOpacity>
            <Icon name="info-outline" size={24} color="#fff" />
          </TouchableOpacity>
        </View>

        {/* Security Level */}
        <View style={styles.securityLevelCard}>
          <View style={styles.securityLevelContent}>
            <Icon name="shield" size={40} color="#4CAF50" />
            <View style={styles.securityLevelInfo}>
              <Text style={styles.securityLevelTitle}>安全等级</Text>
              <Text style={styles.securityLevelText}>高</Text>
            </View>
          </View>
          <Text style={styles.securityLevelDescription}>
            您的账户已启用多项安全保护措施
          </Text>
        </View>

        {/* Security Features */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>安全功能</Text>
          <View style={styles.sectionContent}>
            {securityFeatures.map((item, index) => renderSecurityItem(item, index))}
          </View>
        </View>

        {/* Security Actions */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>安全操作</Text>
          <View style={styles.sectionContent}>
            {securityActions.map((item, index) => renderActionItem(item, index))}
          </View>
        </View>

        {/* Security Tips */}
        <View style={styles.tipsContainer}>
          <Text style={styles.tipsTitle}>安全提示</Text>
          <View style={styles.tipItem}>
            <Icon name="security" size={16} color="#4CAF50" />
            <Text style={styles.tipText}>
              定期更新密码，使用强密码组合
            </Text>
          </View>
          <View style={styles.tipItem}>
            <Icon name="devices" size={16} color="#4CAF50" />
            <Text style={styles.tipText}>
              定期检查登录设备和活动
            </Text>
          </View>
          <View style={styles.tipItem}>
            <Icon name="warning" size={16} color="#ff9800" />
            <Text style={styles.tipText}>
              切勿向任何人透露您的密码或恢复短语
            </Text>
          </View>
        </View>
      </ScrollView>

      {/* Change Password Modal */}
      <Modal
        visible={showPasswordModal}
        transparent
        animationType="slide"
        onRequestClose={() => setShowPasswordModal(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>修改密码</Text>
            
            <TextInput
              style={styles.input}
              placeholder="当前密码"
              placeholderTextColor="#a0a0a0"
              secureTextEntry
              value={currentPassword}
              onChangeText={setCurrentPassword}
            />
            
            <TextInput
              style={styles.input}
              placeholder="新密码"
              placeholderTextColor="#a0a0a0"
              secureTextEntry
              value={newPassword}
              onChangeText={setNewPassword}
            />
            
            <TextInput
              style={styles.input}
              placeholder="确认新密码"
              placeholderTextColor="#a0a0a0"
              secureTextEntry
              value={confirmPassword}
              onChangeText={setConfirmPassword}
            />
            
            <View style={styles.modalButtons}>
              <TouchableOpacity
                style={[styles.modalButton, styles.cancelButton]}
                onPress={() => setShowPasswordModal(false)}
              >
                <Text style={styles.cancelButtonText}>取消</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.modalButton, styles.confirmButton]}
                onPress={handleChangePassword}
              >
                <Text style={styles.confirmButtonText}>确认修改</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
  },
  securityLevelCard: {
    backgroundColor: 'rgba(76, 175, 80, 0.2)',
    borderRadius: 20,
    padding: 20,
    marginBottom: 30,
  },
  securityLevelContent: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  securityLevelInfo: {
    marginLeft: 15,
  },
  securityLevelTitle: {
    fontSize: 16,
    color: '#fff',
    marginBottom: 5,
  },
  securityLevelText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#4CAF50',
  },
  securityLevelDescription: {
    color: '#a0a0a0',
    fontSize: 14,
  },
  section: {
    marginBottom: 30,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#a0a0a0',
    marginBottom: 15,
  },
  sectionContent: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    overflow: 'hidden',
  },
  securityItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
  },
  securityItem:lastChild: {
    borderBottomWidth: 0,
  },
  securityInfo: {
    flex: 1,
  },
  securityTitle: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
  securityDescription: {
    fontSize: 14,
    color: '#a0a0a0',
    marginTop: 2,
  },
  actionItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 15,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
  },
  actionItem:lastChild: {
    borderBottomWidth: 0,
  },
  actionLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  actionIcon: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 15,
  },
  actionTitle: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
  tipsContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.05)',
    borderRadius: 15,
    padding: 20,
    marginTop: 20,
  },
  tipsTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 15,
  },
  tipItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  tipText: {
    color: '#a0a0a0',
    fontSize: 14,
    marginLeft: 10,
    flex: 1,
  },
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: '#1a1a2e',
    borderRadius: 20,
    padding: 30,
    width: '80%',
    maxWidth: 400,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 20,
    textAlign: 'center',
  },
  input: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 10,
    padding: 15,
    color: '#fff',
    marginBottom: 15,
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 20,
  },
  modalButton: {
    flex: 1,
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginHorizontal: 5,
  },
  cancelButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
  },
  confirmButton: {
    backgroundColor: '#4CAF50',
  },
  cancelButtonText: {
    color: '#a0a0a0',
    fontSize: 16,
  },
  confirmButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default SecuritySettingsScreen;
